<template>
	<view class="flex flex-col h-screen">
		<NavBarVue title="帖子详情"></NavBarVue>
		<view class="flex-1 overflow-hidden">
			<scroll-view scroll-y="true" class="h-full">
				<view class="px-30">
					<view class="font-bold text-center text-md">{{postDetail.title}}</view>
					<view class="mt-20">
						<mp-html :content="postDetail.content" />
					</view>
					<view class="mt-20">
						<view class="bg-white rounded-lg p-20 mb-20" v-for="item,idx in commentsList" :key="idx">
							<view class="flex item">
								<view class="w-36 h-36 rounded-lg overflow-hidden" v-if="item?.member?.ach == 1">
									<ImageBoxVue :src="item?.member?.anchor.headimg"></ImageBoxVue>
								</view>
								<view class="w-36 h-36 rounded-lg overflow-hidden" v-else>
									<ImageBoxVue :src="item?.member?.headimg"></ImageBoxVue>
								</view>
								<view>
									<view class="ml-10" v-if="item?.member?.ach == 1">
										<text class="">{{item.member?.anchor.name}}</text>
									</view>
									<view class="ml-10" v-else>
										<text class="">{{item?.member?.nickname}}</text>
									</view>
								</view>
							</view>
							<view class="mt-10">{{item.content}}</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="p-30">
			<button type="primary" class="rounded-full" @click="onComment">评论</button>
		</view>
		<uni-popup ref="popupRef" type="bottom">
			<view class="bg-white rounded-t-lg p-30">
				<view class="flex justify-center">
					<text class="font-bold text-sm">评论</text>
				</view>
				<FromList title="评论内容" align="bottom">
					<uni-easyinput type="textarea" :inputBorder="true" v-model="postForm.content" placeholder="请输入评论内容" />
				</FromList>
				<view class="pt-30">
					<button type="primary" class="rounded-full" @click="onSave">确定</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
	import {
		ref,
		provide,
	} from 'vue';
	import {
		onLoad,
		onShow,
	} from "@dcloudio/uni-app"
	import FromList from '@/components/FromList.vue';
	import communityApi from '@/apis/apiList/communityApi';

	const popupRef = ref(null)
	const postId = ref("") // 帖子ID
	const postDetail = ref({}) // 帖子详情
	const loading = ref(false) // 加载中
	const isAch = ref(0)
	const postForm = ref({
		"member.id": '',
		pid: '',
		content: '',
	})
	const commentsList = ref([]) // 评论列表

	onLoad((option) => {
		postId.value = option.id;
		loading.value = true
		isAch.value = uni.getStorageSync('user').ach
	})
	onShow(() => {
		getDetail()
		getcommentList()
	})
	const onSave = () => {
		if (!postForm.value.content) {
			uni.showToast({
				icon: "none",
				title: "请输入内容！"
			})
			return
		}
		postForm.value["member.id"] = uni.getStorageSync('user').id
		postForm.value.pid = postId.value
		postForm.value.sts = 1
		communityApi.addPinglun(postForm.value).then(res => {
			getcommentList()
			popupRef.value.close()
		})
	}
	const onComment = () => {
		popupRef.value.open()
	}
	const getcommentList = () => {
		const opt = {
			pid: postId.value,
			sts: 1
		}
		communityApi.getPingluenlistAtsts(opt).then(res => {
			commentsList.value = res.data
		})
	}
	const getDetail = () => {
		const opt = {
			id: postId.value,
		}
		loading.value = true
		communityApi.getPostinfo(opt).then(res => {
			if (res.data.aanlist) {
				res.data.aanlist.map(post => {
					if (post.sts == 1) {
						let arr = post.details.split(',');
						let vArr = []
						arr.map(item => {
							let a1 = item.split('|')
							let obj = {
								url: a1[0],
								time: a1[1],
								playing: false,
							}
							vArr.push(obj)
						})
						post.voiceArr = vArr
					}
				})
			}
			postDetail.value = res.data
			loading.value = false
		})
	}
</script>

<style>
</style>